<script setup lang="ts">
import type { PropType } from 'vue';
import { ref } from 'vue';
import { SettingBanner, SettingProcessNode, SettingCertificateContent, SettingFooter } from './index'
defineOptions({ name: 'Query' });

interface WorkSpaceType {
  banner: any;
  processNode: any;
  certificateContent: any;
  footer: any;
  activeName: string;
}
const props = defineProps({
  workSpace: {
    type: Object as PropType<WorkSpaceType>,
    required: true,
  }
});


const handleClick = (tab: any, event: any) => {
  console.log(tab, event);
}

const emit = defineEmits(['update:modelValue', 'queryData', 'resetQuery']);

// 子组件引用
const settingProcessNodeRef = ref()
const settingCertificateContentRef = ref()

// 验证方法
const validate = async () => {
  try {
    // 验证 processNode
    if (props.workSpace.processNode.processNodeConfigs.length > 0) {
      const processNodeValid = await settingProcessNodeRef.value?.validateNode()
      if (!processNodeValid) {
        return false
      }
    }
    
    // 验证 certificateContent
    if (props.workSpace.certificateContent.certificateContentConfigs.length > 0) {
      const certificateContentValid = await settingCertificateContentRef.value?.validateContent()
      if (!certificateContentValid) {
        return false
      }
    }
    
    return true
  } catch (error) {
    console.error('WorkSpace 验证失败:', error)
    return false
  }
}

// 暴露验证方法
defineExpose({
  validate
})

</script>
<template>
  <div class="work-space h-full overflow-hidden bg-[#fff] p-[24px]">
    <el-tabs class="h-full" v-model="props.workSpace.activeName" @tab-click="handleClick">
      <el-tab-pane class="h-full" :label="$t('certificate.workSpace.banner')" name="banner">
        <SettingBanner :banner="props.workSpace.banner" />
      </el-tab-pane>
      <el-tab-pane class="h-full" :label="$t('certificate.workSpace.processNode')" name="processNode">
        <SettingProcessNode ref="settingProcessNodeRef" :processNode="props.workSpace.processNode" />
      </el-tab-pane>
      <el-tab-pane class="h-full" :label="$t('certificate.workSpace.content')" name="content">
        <SettingCertificateContent ref="settingCertificateContentRef" :certificateContent="props.workSpace.certificateContent" />
      </el-tab-pane>
      <el-tab-pane class="h-full" :label="$t('certificate.workSpace.footer')" name="footer">
        <SettingFooter :footer="props.workSpace.footer" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
  padding: 0px!important;
}
:deep(.el-tabs__item) {
  padding: 0px 8px!important;
  font-size: 16px!important;
  font-weight: normal!important;
}
:deep(.el-tabs__nav-next), :deep(.el-tabs__nav-prev) {
  display: none!important;
}
:deep(.el-tabs__item.is-active) {
  color: #0067D1!important;
}
</style>
